<template>
  <div>
    <h3>计算属性 -- {{ count }} -- {{ showCount }}</h3>
    <div>{{ showCount }}</div>
    <div>{{ showCount }}</div>
    <div>{{ showCount }}</div>
    <button @click="setCount">设置计算属性</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
export default {
  setup() {
    const count = ref(100)

    // 计算属性写回调函数，它只能获取数据不能设置
    // 如果依赖项没有发生改变，则多次调用时，下一次获取走计算后的缓存结果，如果依赖项发生了变化会计算1次
    // const showCount = computed(() => {
    //   console.log('computed')
    //   return `￥${count.value}元`
    // })

    // 如果计算属性要是有设置操作，则需要通过getter和setter定义
    const showCount = computed({
      get() {
        return `￥${count.value}元`
      },
      set(v) {
        console.log(v)
        count.value -= v
      }
    })

    const setCount = () => {
      showCount.value = 1
    }

    return {
      count,
      showCount,
      setCount
    }
  }
}
</script>

<style lang="scss" scoped></style>
